:global {
  .lh-snapshot-dropdown{
    padding: 4px 0px !important;
  }
  .ant-tree-child-tree:after {
    display: none !important;
  }
  .lh-tree-snapshot.ant-tree{
    .tree-start-wrap>a{
      height: 35px

    }
    .ant-tree-node-selected {
      background-color: #fff !important;
    }
    .ant-tree-node-content-wrapper:hover {
      background-color: #fff !important;
    }
    .ant-tree-treenode-disabled{
      >a {
        .tree-snapshot-icon{
          background-color: #b4b4b4
        }
        .snapshot-name{
          color: #a4a4a4
        }
        .snapshot-time{
          color: #c4c4c4
        }
      }
    }
    .snapshot-current-desc{
      height: 55px;
      line-height: 33px;
      padding-top: 11px;
      button{
        border: none;
        padding: 0;
        color: white;
      }
      i{
        border-radius: 3px 0 0 3px;
        font-size: 22px;
        background-color: #28864f;
        padding: 5px 3.5px 3.4px;
        display: inline-block;
        height: 34px;
      }
      span{
        border-radius:  0 3px 3px 0;
        margin: 0;
        padding: 5px;
        background-color: #33ab65;
        display: inline-block;
        vertical-align: top;
        padding-right: 10px;
        height: 34px;
      }
    }
    .tree-snapshot-start-point{
      width: 15px;
      height: 15px;
      display: inline-block;
      border-radius: 50%;
      background-color: hsl(209, 66%, 51%);
      float: left;
      margin-top: 3px;
      margin-left: 6px;
    }
    >li>.ant-tree-child-tree.ant-tree-child-tree.ant-tree-child-tree{
      margin-top: 9px;
    }
    .tree-snapshot-icon{
      position: relative;
      width: 34px;
      height: 34px;
      display: inline-block;
      border-radius: 50%;
      background-color: hsl(209, 66%, 51%);
      z-index: 2;
      .snapshot-icon{
        line-height: 25px;
        width: 25px;
        height: 25px;
        position: absolute;
        left: 0;
        right: 0;
        top: 3px;
        bottom: 0;
        margin: auto;
        font-size: 20px;
        color: white;
      }
    }

    .tree-snapshot-desc{
      line-height: 15px;
      vertical-align: super;
      margin-left: 10px;
      font-size: 10px;
      display: inline-block;
      .snapshot-name{
        font-size: 120%;
        padding-top: 14px;
        margin-bottom: 0px;
      }
      .snapshot-time{
        color: #a4a4a4;
      }
    }
    @treeNodeGap: 128px;
    .ant-tree-child-tree.ant-tree-child-tree.ant-tree-child-tree {
      position: relative;
      top: -54px;
      margin-left: @treeNodeGap;
      &::before {
        content: '';
        display: block;
        width: 2px;
        height: ~"calc(100% - 130px)";
        border-left: 2px solid #ecf0f1;
        position: absolute;
        top: 40px;
        left: -(@treeNodeGap - 18) !important;
        z-index: 1;
      }
    }

    .ant-tree-switcher.ant-tree-switcher.ant-tree-switcher.ant-tree-switcher {
      display: none;
    }

    .ant-tree-title {
      display: inline-block;
    }

    .ant-tree-node-content-wrapper {
      z-index: 2;
      position: relative;
      display: inline !important;
      padding: 0px !important;
    }
    li {
      position: relative;
      min-width: 210px;
      a {
        position: relative;
        top: 0;
        z-index: 2;
        background: white;
        padding: 10px 5px;
        height: 56px;
        &.ant-tree-node-selected{
          background-color: #cfdfe9;
        }
      }
    }

    .ant-tree-child-tree {
      position: relative;
      top: 0px;
      > li{
        margin-top: 0px;
        padding: 0px !important;
        // height: 59px;
        &:first-child {
          padding-top: 0px !important;
        } 
        &::before {
          content: '';
          display: block;
          width: @treeNodeGap - 2px;
          height: 2px;
          border-top: 2px solid #ecf0f1;
          position: absolute;
          top: 28px;
          z-index: 0;
          right: 100%;
        }
        &:last-child>.ant-tree-child-tree:before{
          content: '';
          display: block;
          width: 2px;
          height: ~"calc(100% - 130px)";
          border-left: 2px solid #ecf0f1;
          position: absolute;
          top: 40px;
          left: -(@treeNodeGap - 18) !important;
          z-index: 1;
        }
        &:last-child {
          height: 120px;
          padding: 0px;
        }
      }
      &:after {
        content: '';
        display: block;
        width: 2px;
        height: ~"calc(100% - 57px)";
        border-left: 2px solid #ecf0f1;
        position: absolute;
        top: 28px;
        left: -(@treeNodeGap - 20px);
      }
    }
    >li>.ant-tree-child-tree{
      >li{
        &:last-child>.ant-tree-child-tree:before{
          left: -(@treeNodeGap + 46);
        }
      }
    }
    >li>.ant-tree-child-tree{
      &:after {
        left: -(@treeNodeGap - 132px);
      }
    }
  }
}
